<template>
	<div>
		<a-modal title="选择部门/人员" :width="700" :zIndex="9999" :visible="visible" :bodyStyle="bodyStyle" @ok="handleOk"
			@cancel="handleCancel" cancelText="取消" okText="确定">
			<div class="content">
				<!-- 已选择列表 -->
				<div class="left">
					<div class="info-list">
						<!-- 已选中的部门列表 -->
						<div class="deptInfo-list" v-show="selectList.departments && !onlyUser"
							v-for="(itemD ,indexD) in selectList.departments" :key="indexD+'D'"
							@click="delInfo(indexD,'D')">
							{{itemD.name}}<span class="icon-del">×</span>
						</div>
						<!-- 已选中的人员列表 -->
						<div class="userInfo-list" v-show="selectList.users && !onlyDept"
							v-for="(itemU ,indexU) in selectList.users" :key="itemU.userid"
							@click="delInfo(indexU,'U')">
							{{itemU.name}}<span class="icon-del">×</span>
						</div>
					</div>
				</div>

				<!-- 树形列表 -->
				<div class="right">
					<div class="depart-title" @click="get_all">
						<span class="title-icon">
							<a-icon type="cluster" />
						</span>
						<span class="title-text">
							全部部门
						</span>
					</div>
					<div class="breadcrumb">
						<a-breadcrumb>
							<a-breadcrumb-item>
								<span class="crumb" @click="get_all">全部</span>
							</a-breadcrumb-item>

							<a-breadcrumb-item v-for="(crumb, cIndex) in crumb_ls" :key="cIndex+'c'">
								<span class="crumb" @click="get_crumb(crumb.id,cIndex)">{{crumb.name}}</span>
							</a-breadcrumb-item>
						</a-breadcrumb>
					</div>
					<div class="depart-ls">
						<!-- 加载动画 -->
						<div class="icon-load" v-if="loading">
							<a-spin :indicator="indicator" />
						</div>
						<!-- 部门列表 -->
						<div class="depart-item" v-show="departs_ls && !onlyUser" v-for="(item ,index) in departs_ls"
							:key="index+'d'" @click="dept_detail(item,index)">
							{{item.name}}<span class="depart-item-right" @click.stop="next_level(item)">
								<a-icon type="more" />下级
							</span>
						</div>
						<div class="depart-item" v-show="departs_ls && onlyUser" v-for="(item ,index) in departs_ls"
							:key="index+'n'" @click="next_level(item)">
							{{item.name}}
						</div>
						<!-- 人员列表 -->
						<div class="user-item" v-show="user_ls && !onlyDept" v-for="(uItem ,uIndex) in user_ls"
							:key="uIndex+'u'" @click="user_detail(uItem,uIndex)">
							<a-avatar class="avatar" icon="user" :src="(uItem.avatar)?(uItem.avatar):avater"/>
							<span>{{uItem.name}}</span>
						</div>
					</div>
				</div>
			</div>
		</a-modal>
	</div>
</template>

<script>
	// import { parseTime, post, get, complexPicker, rtext } from '@/utils'
	export default {
		data() {
			return {
				visible: false,
				bodyStyle: {
					padding: 0
				}, // 对话框的样式
				departs_ls: [], // 全部部门
				user_ls: [], // 部门下的全部用户
				selectList: { // 最终要传给接口的数据
					departments: [],
					users: [],
				},
				crumb_ls: [], // 面包屑列表
				avater: "../../../static/img/vue-antd-logo.png", //默认头像
				indicator:<a-icon type="loading" style="font-size: 24px" spin />, //载入动画
				loading: false, //是否显示载入动画
				
			};
		},
		props: {
			sonMethod: {
				type: Function,
				default: null
			},
			sonMethod2: {
				type: Function,
				default: null
			},
			// 是否只能选择部门
			onlyDept: false,
			// 是否只能选择人员
			onlyUser: false,
			// 部门只能单选
			radioDept: false,
			// 人员只能单选
			radioUser: false,
			//清空选择人员
			empty:false,
		},
		// create(){
		// 	this.get_all()
		// },
		methods: {
			// 左侧已选中列表 - 删除指定元素方法
			delInfo(index, type) {
				if (type == 'D') {
					this.selectList.departments.splice(index, 1);
				}
				if (type == 'U') {
					this.selectList.users.splice(index, 1);
				}
				// console.log(JSON.stringify(this.selectList))
			},
			// 点击获取部门详情，并加入selectList.departments数组中，再次点击从数组中移除
			dept_detail(deptDetail, index) {
				let departments1 = [...this.selectList.departments]
				let deptInfo = {
					"department_id": deptDetail.department_id,
					"name": deptDetail.name
				}
				let deptIndex = 0
				try {
					departments1.forEach(item => {
						if (item.department_id == deptDetail.department_id) {
							throw new Error('跳出forEach循环');
						}
						deptIndex = deptIndex + 1
					})
					// 单选&&多选数据处理
					if (this.radioDept) {
						this.selectList.departments.splice(0, 10, deptInfo);
					} else {
						this.selectList.departments.push(deptInfo)
					}
				} catch (e) {
					this.selectList.departments.splice(deptIndex, 1);
				}
				// console.log(JSON.stringify(this.selectList))
			},
			// 点击获取人员详情，并加入selectList.users数组中，再次点击从数组中移除
			user_detail(userDetail, index) {
				let userInfo = {
					"name": userDetail.name,
					"userid": userDetail.userid,
					"avatar": userDetail.avatar
				}
				let users1 = [...this.selectList.users]
				let userIndex = 0
				try {
					users1.forEach(item => {
						if (item.userid == userDetail.userid) {
							throw new Error('跳出forEach循环');
						}
						userIndex = userIndex + 1
					})
					// 单选&&多选数据处理
					if (this.radioUser) {
						this.selectList.users.splice(0, 10, userInfo);
					} else {
						this.selectList.users.push(userInfo)
					}
				} catch (e) {
					this.selectList.users.splice(userIndex, 1);
				}
				// console.log(JSON.stringify(this.selectList))
			},
			//点击面包屑检索
			get_crumb(id, i) {
				this.get_departs(id)
				this.get_users(id)
				this.crumb_ls.splice(i + 1, 100);
			},
			//查询部门下级的部门和人员,并添加面包屑
			next_level(dept) {
				let dept_id = dept.department_id
				this.get_departs(dept_id)
				this.get_users(dept_id)
				let deptInfo = {
					"name": dept.name,
					"id": dept_id
				}
				this.crumb_ls.push(deptInfo)
			},
			//获取一级部门和人员
			get_all() {
				this.get_departs(1)
				this.get_users(1)
				this.crumb_ls = []
			},
			//查询全部部门
			get_departs(dId) {
				this.loading = true
				axios.post('department/get_ls', {
					department_id: dId
				}).then(res => {
					this.loading = false
					this.departs_ls = res.data.data;
					// console.log(this.departs_ls);
					// console.log(JSON.stringify(this.departs_ls))
				})
			},
			//查询部门下的人员
			get_users(uId) {
				axios.post('user/get_ls', {
					department_id: uId
				}).then(res => {
					this.user_ls = res.data.data;
					// console.log(this.user_ls);
					// console.log(JSON.stringify(this.user_ls))
				})
			},
			//确定
			handleOk(e) {
				if(this.empty){
					if (this.sonMethod2) {
						this.sonMethod2();
					}
					this.visible = false;
				}else{
					if (this.sonMethod) {
						this.sonMethod();
					}
					this.visible = false;
				}
				
				
			},
			//取消,关闭窗口
			handleCancel(e) {
				if(this.empty){
					if (this.sonMethod2) {
						this.sonMethod2('cancel');
					}
					this.visible = false;
				}else{
					if (this.sonMethod) {
						this.sonMethod('cancel');
					}
					this.visible = false;
				}
			},
			//初始化弹窗
			openWin() {
				this.selectList= { // 最终要传给接口的数据
					departments: [],
					users: [],
				},
				this.visible = true
				this.crumb_ls = []
				this.get_departs(1)
				this.get_users(1)
				// // 单选&&多选数据处理
				// if(this.radioUser) {
				//   this.selectList.users.splice(0, 1);
				// }
				// // 单选&&多选数据处理
				// if(this.radioDept) {
				//   this.selectList.departments.splice(0, 1);
				// }
			}
		},
	};
</script>

<style scoped>
	.content {
		box-sizing: border-box;
		display: flex;
		justify-content: center;
	}

	.left,
	.right {
		box-sizing: border-box;
		width: 350px;
		height: 400px;
		padding: 16px 0
	}

	.left {
		border-right: 1px solid rgba(0, 0, 0, .1);
	}

	.depart-ls {
		height: 288px;
		overflow: scroll;
		position: relative;
	}

	.depart-ls::-webkit-scrollbar {
		width: 0 !important
	}

	.depart-ls {
		-ms-overflow-style: none;
	}

	.depart-ls {
		overflow: -moz-scrollbars-none;
	}

	.left {
		height: 400px;
		overflow: scroll;
		position: relative;
	}

	.left::-webkit-scrollbar {
		width: 0 !important
	}

	.left {
		-ms-overflow-style: none;
	}

	.left {
		overflow: -moz-scrollbars-none;
	}

	.depart-item {
		padding: 8px 16px;
		font-size: 15px;
		color: #191F25;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
	}

	.user-item {
		padding: 8px 16px;
		font-size: 15px;
		color: #191F25;
		cursor: pointer;
		display: flex;
		display: flex;
		align-items: center;
	}

	.depart-item:hover,
	.user-item:hover {
		background-color: rgba(0, 0, 0, .1);
	}

	.depart-title {
		display: flex;
		align-items: center;
		margin-left: 16px;
		cursor: pointer;
	}

	.title-icon {
		font-size: 30px;
		background-color: #6699ff;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	.title-text {
		font-size: 14px;
		margin: 16px;
	}

	.breadcrumb {
		padding: 8px 16px;
	}

	.crumb {
		cursor: pointer;
	}

	.avatar {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-right: 8px;
	}

	.depart-item-right {
		font-size: 14px;
		color: rgba(0, 0, 0, 0.4);
	}

	.depart-item-right:hover {
		color: #06BB9A;
	}

	.icon-load {
		position: absolute;
		top: 30%;
		left: 165px;
	}

	.info-list {
		margin: 8px 32px;
		display: flex;
		flex-wrap: wrap;
	}

	.deptInfo-list,
	.userInfo-list {
		background-color: rgba(0, 0, 0, .1);
		margin: 2px 4px;
		white-space: nowrap;
		color: #191F25;
		padding: 4px 8px;
		font-size: 13px;
		border-radius: 4px;
		cursor: pointer;
	}

	.deptInfo-list:hover,
	.userInfo-list:hover {
		background-color: rgba(0, 0, 0, .2);
	}

	.icon-del {
		margin-left: 4px;
	}
</style>
